<script setup>
const drafts = ref([
  {
    id: 1,
    title:
      '草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1草稿1',
    content: '',
    createDate: '2023-07-01',
  },
  {
    id: 1,
    title: '',
    content: '',
    createDate: '2023-07-01',
  },
])
</script>

<template>
  <div v-for="(item, index) in drafts" :key="index" class="min-h-80 p-8">
    <div class="flex-col">
      <div class="flex">
        <span class="line-clamp-1 flex-1">{{ item.title || "无标题" }}</span>
        <el-popover
          :show-arrow="false"
          placement="bottom-end"
          trigger="click"
          :popper-style="{ minWidth: '0', width: 'auto' }"
        >
          <template #reference>
            <span class="ml-10 f-c-c border-rd-5 cursor-pointer-bg-hover">
              <i class="i-fe:more-horizontal font-size-24 color-primary" /></span>
          </template>
          <div class="flex-col items-center us">
            <span class="cursor-pointer-text-hover">编辑</span>
            <span class="mt-10 cursor-pointer-text-hover">删除</span>
          </div>
        </el-popover>
      </div>
      <span class="mt-10 font-size-13 op-text">{{ item.createDate }}</span>
    </div>
    <el-divider class="us" />
  </div>
</template>

<style scoped>
.el-divider--horizontal {
  margin: 12px 0;
  opacity: 0.5;
}
:deep(.el-popover.el-popper) {
  min-width: 0;
}
</style>
